<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  
</head>
<style>
  * {
    padding: 0;
    margin: 0;
  }
  body{
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  main{
    width: 400px;
    height: 400px;
    border: 1px solid red;
    /* position: relative; */
    transition: all 2s;
    display: flex;
    justify-content: center;
    align-items: center;
    transform-style: preserve-3d;
    transform: perspective(900px);
    background: yellow;
  }
  article:hover main{
    transform:perspective(900px) rotateY(180deg);
  }
   div{
    width: 50%;
    height: 50%;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 0-1之间的透明度会把P标签的内容22222222222222显示出来 1的时候22222222222222不会显示 */
    /* opacity: .5; */
    font-size: 70px;
    /* 指定当元素背面朝向观察者时是否可见 */
    backface-visibility:hidden;
    z-index: -1;
   }
   div:nth-of-type(1){
    background-color: red;
   }
   div:nth-of-type(2){
    background-color:aqua;
    transform: rotateY(180deg);
   }
</style>
<body>
  <article>
    <main>
      <!-- p标签没有用只是看下弹性盒子对定位的弹性元素有什么影响 -->
      <!-- <p>22222222222222</p> -->
      <div>1</div>
      <div>2</div>
   </main>
  </article>
   
</body>
<script>
    

    
</script>
</html>
